<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>事件详情</title>
    <style>
        body{

        }
        .body{
            width: 800px;
            margin: 0 auto;
        }
        .comment{
            background: skyblue;
            margin: 20px 0;
            padding: 5px;
            line-height: 1.5em;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }
        //事件id
        let id = null;
        $(function (){
            id = getQueryVariable("id")

            $.getJSON("http://127.0.0.1:8080/restevent/one/"+id,function (res){
                let hotevent = res.data
                $("#keyWord").text(hotevent.keyWord)
                $("#createDate").text(hotevent.createDate)
                $("#hotContent").text(hotevent.hotContent)
            })

            $.getJSON("http://127.0.0.1:8080/restcomment/comments/"+id,function (res){
                let comments = res.data
                $(comments).each(function (i,item){
                    let html =
                        `<div class="comment">
                            评论事件: ${item.commentDate}<br/>
                            ${item.content}
                        </div>`
                    $("#commentlist").append(html)
                })
            })
        })

        function addcomment(){
            let content = $("#content").val()
            $.post("http://127.0.0.1:8080/restcomment/add",{hotEventsId:id,content:content},function (res){
                if(res.code == 200){
                    alert("评论成功")
                    location.reload()
                }
            })
        }


    </script>
</head>
<body>
<div class="body">
    <h2 id="keyWord"></h2>
    <p>创建于: <span id="createDate"></span></p>
    <p id="hotContent">

    </p>
    <h3>评论</h3>
    <div id="commentlist"></div>

    <hr/>
    <div>
        快速评论
        <div>
            <textarea name="content" id="content" cols="30" rows="3"></textarea>
        </div>

        <input type="button" value="提交" onclick="addcomment()"/><a href="../index">返回首页</a>
    </div>
</div>
</body>
</html>
